<div [formGroup]="form">
  <div class="clr-form-control clr-row" [class.clr-error]="control?.errors" *ngIf="model.type === types.CODE">
    <label class="clr-col-12 clr-col-md-4" [attr.for]="model.id">
      <span class="text-truncate">{{ model.name }}</span>
    </label>
    <div class="clr-control-container clr-col-12 clr-col-md-8">
      <div class="clr-textarea-wrapper">
        <textarea [id]="model.id" class="clr-textarea" [formControl]="control" style="width: 100%"></textarea>
      </div>
      <div class="clr-subtext">{{ model.description }}</div>
      <div *ngIf="control?.errors" class="clr-subtext">Invalid value.</div>
    </div>
  </div>

  <div class="clr-form-control clr-row" [class.clr-error]="control?.errors" *ngIf="model.type === types.SELECT">
    <label class="clr-col-12 clr-col-md-4" [attr.for]="model.id">
      <span class="text-truncate">{{ model.name }}</span>
    </label>
    <div class="clr-control-container clr-col-12 clr-col-md-8">
      <div class="clr-select-wrapper">
        <select [id]="model.id" [formControl]="control" [(ngModel)]="model.value">
          <option *ngFor="let o of model['options']" [ngValue]="o.value">{{ o.name }}</option>
        </select>
      </div>
      <div class="clr-subtext">{{ model.description }}</div>
      <div *ngIf="control?.errors" class="clr-subtext">Invalid value.</div>
    </div>
  </div>

  <div
    class="clr-form-control clr-row"
    [class.clr-error]="control?.errors"
    *ngIf="model.type !== types.SELECT && model.type !== types.CODE"
  >
    <label class="clr-col-12 clr-col-md-4" [attr.for]="model.id">
      <span class="text-truncate">{{ model.name }}</span>
    </label>
    <div class="clr-control-container clr-col-12 clr-col-md-8" [ngSwitch]="model.type">
      <div class="clr-input-wrapper">
        <input
          clrCheckbox
          *ngSwitchCase="types.CHECKBOX"
          class="clr-col-12 clr-col-md-8"
          type="checkbox"
          [id]="model.id"
          [(ngModel)]="model.value"
          [formControlName]="model.id"
        />

        <input
          *ngSwitchCase="types.EMAIL"
          type="email"
          class="clr-input"
          style="width: 100%"
          [id]="model.id"
          [placeholder]="model.defaultValue || ''"
          [formControl]="control"
          [(ngModel)]="model.value"
        />
        <input
          *ngSwitchCase="types.URL"
          type="url"
          class="clr-input"
          style="width: 100%"
          [id]="model.id"
          [placeholder]="model.defaultValue || ''"
          [formControl]="control"
          [(ngModel)]="model.value"
        />
        <input
          *ngSwitchCase="types.NUMBER"
          type="number"
          class="clr-input"
          style="width: 100%"
          [id]="model.id"
          [placeholder]="model.defaultValue || ''"
          [formControl]="control"
          [(ngModel)]="model.value"
        />
        <input
          *ngSwitchCase="types.PASSWORD"
          type="password"
          class="clr-input"
          style="width: 100%"
          [id]="model.id"
          [placeholder]="model.defaultValue || ''"
          [formControl]="control"
          [(ngModel)]="model.value"
        />
        <input
          *ngSwitchDefault
          [id]="model.id"
          class="clr-input"
          style="width: 100%"
          [placeholder]="model.defaultValue || ''"
          [formControl]="control"
          [(ngModel)]="model.value"
        />
      </div>
      <div class="clr-subtext">{{ model.description }}</div>
      <div *ngIf="control?.errors" class="clr-subtext">Invalid value.</div>
    </div>
  </div>
</div>
